<template>
	<view class="flex-col justify-start page">
		<view class="group">
			<text class="title">用户名</text>
			<view class="text-wrapper">
				<input class="text" maxlength="11" name="nickname_user" v-model="nickname_user" />
			</view>

			<text class="title">真实姓名</text>
			<view class="text-wrapper">
				<input class="text" maxlength="4" name="name_user" v-model="name_user" />
			</view>
			<text class="title">密码</text>
			<view class="text-wrapper">
				<input class="text" :password="ispas1" maxlength="16" name="password_user" v-model="password_user"
					placeholder="请输入密码" />
			</view>

			<text class="title">确认密码</text>
			<view class="text-wrapper">
				<input class="text" :password="ispas2" maxlength="16" name="password_user2" v-model="password_user2"
					placeholder="请再次输入密码" />
			</view>

			<text class="title">手机号</text>
			<view class="text-wrapper">
				<text class="text">{{phone}}</text>
			</view>

			<text class="title">性别</text>
			<view class="radio">
				<radio-group name="gender_user" v-model="gender_user">
					<radio value="male" style="margin-right: 5%;">男</radio>
					<radio value="female">女</radio>
				</radio-group>
			</view>
		</view>
		<view class="submit" @click="submit()">
			<text class="text">确认</text>
		</view>

		<view class="group_1">
			<text class="text_1">已拥有账号?</text>
			<text class="text_2" @click="register3()">登录</text>
		</view>
	</view>
</template>

<script>
	import {
		_register2
	} from '@/service/user.js';
	export default {
		components: {},
		data() {
			return {
				showPassword: false,
				phone: '',
				name_user: '',
				nickname_user: '',
				account_user: '',
				gender_user: '',
				password_user: '',
				password_user2: '',
				ispas1: true,
				ispas2: true,
				showPassword1: false,
			};
		},

		methods: {
			//获取手机号码并显示
			onLoad(e) {
				this.phone = e.phone
			},
			validIsSame() {
				if (this.password_user != this.password_user2) {
					this.$api.msg(`两次密码不相同`);
					return false;
				}
				return true;
			},
			validIstrue() {
				if (/^\d{6,16}$/.test(this.password_user)) {
					return true;
				} else {
					uni.showToast({
						title: '请输入6-16位数字',
						icon: 'none'
					});
					return false;
				}
			},
			submit() {
				if (this.validIsSame() && this.validIstrue()) {
					this.register2().
					then((result) => {
						if (result) {
							// setTimeout(()=>{
							// 	uni.hideLoading();							
							// }, 500);没用了吧暂时
							uni.navigateTo({
								url: '/pages/login1/login1'
							});
						} else {
							setTimeout(() => {
								// uni.hideLoading();
								this.$api.msg(data.message);
							}, 500);
						}
					});
				}
			},
			async register2() {
				let resultData;
				try {
					resultData = await _register2({
						name_user: this.name_user,
						nickname_user: this.nickname_user,
						account_user: this.phone,
						gender_user: this.gender_user,
						password_user: this.password_user
					});
				} catch (error) {
					throw error; //抛出异常
				}
				if (resultData == undefined || resultData != undefined && resultData.status != 200) {
					throw new Error("接口返回异常，位置register2.vue : register2");
				}
				return resultData.flag;
			},
			//登录
			async register3() {
				uni.navigateTo({
					url: '/pages/login1/login1'
				});
			}
		}
	};
</script>

<style scoped lang="scss">
	.group {
		margin-top: 10%;
		width: 80vw;
		margin-left: 10vw;

		.title {}//暂时没用

		.text-wrapper {
			display: flex;
			align-items: center;
			margin-top: 2%;
			margin-bottom: 5%;
			height: 7vh;
			background-color: #f5f5f5;
			border-radius: 25rpx;

			.text {
				margin-left: 20rpx;
			}
		}

		.radio {
			margin-top: 2%;
			// display: flex;
			// justify-content: center;
		}
	}

	.submit {
		margin-left: 10vw;
		width: 80vw;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 5%;
		margin-bottom: 5%;
		height: 7vh;
		background-color: #428d86;
		border-radius: 50rpx;

		&:active {
			background-color: #3b7f78;//点击变色
		}
	}

	.group_1 {
		display: flex;
		justify-content: center;

		.text_2 {
			color: #428d86;
		}
	}

	.page {
		background-color: #ffffff;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
	}
</style>